<template>
  <div class="HomeVip">
    <div class="bodyer">
      <!--<transition-->
      <!--name="bounce"-->
      <!--enter-active-class="animated fadeInLeft"-->
      <!--leave-active-class="animated fadeOutLeft">-->
      <book v-if="stop ==='Book'" @slesd='Tabbar'  @popupreads="popupreads"></book>
      <!--</transition>-->
      <!--<transition-->
      <!--name="bounce"-->
      <!--enter-active-class="animated fadeInLeft"-->
      <!--leave-active-class="animated fadeOutLeft">-->
      <Books v-if="stop ==='Books'"></Books>
      <!--</transition>-->
      <!--<transition-->
      <!--name="bounce"-->
      <!--enter-active-class="animated fadeInLeft"-->
      <!--leave-active-class="animated fadeOutLeft">-->
      <Read v-if="stop ==='read'" v-on:show="showhome" v-on:showtext="showtext" ref="read" @showpopup="guides"></Read>
      <!--</transition>-->
      <!--<transition-->
      <!--name="bounce"-->
      <!--enter-active-class="animated fadeInLeft"-->
      <!--leave-active-class="animated fadeOutLeft">-->
      <Mine v-if="stop ==='mine'"></Mine>
      <!--</transition>-->
    </div>
    <transition
      name="bounceshade">
      <div class="shade" v-show="shade" @click="hideall"></div>
    </transition>
    <transition
      name="bouncePopup">
      <MakePopup v-if="Makepopup" @hide="hideMake" :item="Makeobj" @Make="Makepay()" @go="go"></MakePopup>
    </transition>
    <TextPopup :options="PopupConfig" v-if="Popup" @hide="hidepopup" @ok="ok()" @call="call()"
               @fall="fall()">
    </TextPopup>
    <Homepopup v-if="homepopup" :text="homepopuptext" @hide="hidehome" @statr="homebtn"></Homepopup>
    <div class="footer">
      <div :class="{'active':stop ==='Book'}" @click.stop="Tabbar('Book')">
        <i class="iconfont icon-shujia" v-if="stop !=='Book'"></i>
        <i class="iconfont icon-shujia-light" v-if="stop ==='Book'"></i>
        <span>书架</span>
      </div>
      <div :class="{'active':stop ==='Books'}" @click.stop="Tabbar('Books')">
        <i class="iconfont icon-shuku" v-if="stop !=='Books'"></i>
        <i class="iconfont icon-shuku-light" v-if="stop ==='Books'"></i>
        <span>书库</span>
      </div>
      <div :class="{'active':stop ==='read'}" @click.stop="Tabbar('read')">
        <i class="iconfont icon-rili" v-if="stop !=='read'"></i>
        <i class="iconfont icon-rili-light" v-if="stop ==='read'"></i>
        <span>日历</span>
      </div>
      <div :class="{'active':stop ==='mine'}" @click.stop="Tabbar('mine')">
        <i class="iconfont icon-wode" v-if="stop !=='mine'"></i>
        <i class="iconfont icon-wode-light" v-if="stop ==='mine'"></i>
        <span>我的</span>
      </div>
    </div>
    <popups v-show="guide" @hideguide="hideguide"></popups>
    <popupsread @hidepopupread="hidepopupread" v-show="showpopupread"  :styless="styless"
                :spanstyke="spanstyke"></popupsread>
  </div>
</template>

<script>
  import book from './components/Book/index'
  import Read from './components/Read/index'
  import Mine from './components/Mine/index'
  import Books from '../Collection/index'
  import popupsread from './components/popupsread/index'
  import popups from './components/popups/index'
  import TextPopup from '../../components/TextPopup/index'
  import Homepopup from '../../components/HomePopup/index'
  import MakePopup from '../../components/MakePopup/index'
  import {Toast} from 'mint-ui'

  export default {
    name: 'HomeVip',
    data: function () {
      return {
        stop: sessionStorage.getItem('Home') || 'Book',
        homepopup: false,
        Makepopup: false,
        shade: false,
        Popup: false,
        showFoot: true,
        homepopuptext: '该天未正常进行阅读哦，如果您在参与坚持阅读返现活动，可以进行补阅读，本次补阅读需要20元！',
        obj: {},
        Makeobj: {},
        PopupConfig: {
          btnStyle: {
            width: '70%',
            height: '4rem',
            background: '#2eb9ff',
            borderRadius: '4rem',
            color: '#fff',
            fontSize: '1.8rem',
            boxShadow: '0 10px 24px 0 rgba(46, 185, 255, 0.4)'
          },
          btnText: '知道了',
          btnClick: 'fall',
          title: '温馨提示',
          content: '当天没有课程哦~',
          Dis: false,
          icon: false,
          btnnum: 1,
        },
        styless: {
          top: '27%',
          left: '10%',
          justifyContent: 'flex-start'
        },
        spanstyke: {
          left: '17%'
        },
        guide: false,
        showpopupread:false
      }
    },
    mounted: function () {
      if (this.$route.query.select) {
        this.stop = this.$route.query.select
        // this.showFoot = false
      }
    },
    methods: {
      Tabbar: function (str) {
        this.stop = str
        sessionStorage.setItem('Home', str)
      },
      showhome: function (obj) {
        this.obj = obj
        this.$axios.makeup_check(obj).then(res => {
          this.Makeobj = res.data.qing_data
          var data = res.data.qing_data
          data.is_newer = 1
          // is_newer    是否新用户0/1
          // can_delay_clock    是否能补0/1
          // need_delay_clock    是否需要补阅读0/1
          // // total_coupon    补学券张数
          if (data.need_delay_clock === 0) {
            return false
          }
          if (data.is_newer === 0 && data.need_delay_clock === 1 && data.can_delay_clock === 1) {
            this.Makepopup = true
            this.shade = true
          } else if (data.is_newer === 1 && data.need_delay_clock === 1 && data.can_delay_clock === 1) {
            this.Makepopup = true
            this.shade = true
          } else if (data.is_newer === 1 && data.can_delay_clock === 0) {
            this.Makepopup = true
            this.shade = true
          } else if (data.is_newer === 0 && data.can_delay_clock === 0) {
            return false
          } else {
            this.Makepopup = false
            this.shade = false
          }
        })
      },
      hideMake: function () {
        this.Makepopup = false
        this.shade = false
      },
      hideall: function () {
        this.Makepopup = false
        this.shade = false
      },
      showtext: function (str) {
        this.homepopuptext = str
      },
      hidehome: function () {
        this.homepopup = false
      },
      homebtn: function () {
        this.$router.push({name: 'PatchDetails'})
      },
      hidepopup: function () {
        this.Popup = false
      },
      ok: function () {
        this.Popup = false
      },
      call: function () {
        this.Popup = false
      },
      fall: function () {
        this.Popup = false
      },
      Makepay: function () {
        this.$axios.makeup_coupon(this.obj).then(res => {
          if (res.data.qing_code === 100) {
            this.$refs.read.Dateup(this.$refs.read.daysall)
            this.hideMake()
            Toast({
              message: '补阅读成功',
              iconClass: 'iconfont icon-tianjiachenggong',
              duration: 3000
            })
          }
        })
      },
      go: function (name, obj) {
        this.$router.push({
          name: name,
          query: obj || {}
        })
      },
      guides: function () {
        var _this = this
        setTimeout(() => {
          _this.guide = true
        }, 300)
      },
      hideguide: function () {
        localStorage.setItem('tenisreads', 1)
        this.guide = false
      },
      popupreads: function (num) {
        if (num === 0) {
          this.styless = {
            top: '28%',
            left: '10%',
            justifyContent: 'flex-start'
          }
          this.spanstyke = {
            left: '17%'
          }
        } else if (num === 1) {
          this.styless = {
            top: '28%',
            left: '40%',
            justifyContent: 'flex-start'
          }
          this.spanstyke = {
            left: '17%'
          }
        } else if (num === 2) {
          this.styless = {
            top: '28%',
            left: '40%',
            justifyContent: 'flex-start'
          }
          this.spanstyke = {
            left: '68%'
          }
        } else if (num === 3) {
          this.styless = {
            top: '53%',
            left: '10%',
            justifyContent: 'flex-start'
          }
          this.spanstyke = {
            left: '17%'
          }
        } else if (num === 4) {
          this.styless = {
            top: '53%',
            left: '40%',
            justifyContent: 'flex-start'
          }
          this.spanstyke = {
            left: '17%'
          }
        } else if (num === 5) {
          this.styless = {
            top: '53%',
            left: '40%',
            justifyContent: 'flex-start'
          }
          this.spanstyke = {
            left: '68%'
          }
        }
        this.showpopupread = true
      },
      hidepopupread: function () {
        localStorage.setItem('tenishomes',1)
        this.showpopupread = false
      },
    },
    components: {
      book,
      Read,
      Mine,
      Books,
      Homepopup,
      MakePopup,
      TextPopup,
      popups,
      popupsread
    }
  }
</script>

<style scoped>
  @import "../../assets/css/views/HomeVip/index.css";
</style>
